<template>
    <view class="content">
        <view class="navbar" :style="{position:headerPosition,top:headerTop}">
            <view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
                综合排序
            </view>
            <view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
                销量优先
            </view>
            <view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
                <text>价格</text>
                <view class="p-box">
                    <text :class="{active: priceOrder === 1 && filterIndex === 2}" class="yticon icon-shang"></text>
                    <text :class="{active: priceOrder === 2 && filterIndex === 2}" class="yticon icon-shang xia"></text>
                </view>
            </view>
            <text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text>
        </view>
        <view class="goods-list">
            <view
                    v-for="(item, index) in goodsList" :key="index"
                    class="goods-item"
                    @click="navToDetailPage(item)"
            >
                <view class="image-wrapper">
                    <image :src="item.original_img" mode="aspectFill"></image>
                </view>
                <text class="title clamp">{{item.goods_name}}</text>
                <view class="price-box">
                    <text class="price">{{item.price}}</text>
                    <text>已售 {{item.sales_sum}}</text>
                </view>
            </view>
        </view>
        <uni-load-more :status="loadingType"></uni-load-more>

        <view class="cate-mask" :class="cateMaskState===0 ? 'none' : cateMaskState===1 ? 'show' : ''"
              @click="toggleCateMask">
            <view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
                <scroll-view scroll-y class="cate-list">
                    <view v-for="item in cateList" :key="item.id">
                        <view class="cate-item b-b two" @click="changeCate(item)">{{item.name}}</view>
                    </view>
                </scroll-view>
            </view>
        </view>

    </view>
</template>

<script>
  import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
  import { getGoodsList, getGoodsListNew, getGoodsListRecommand, goodsCategoryList, searchGoods } from '@/api/goods'
  import server from '../../utils/server'

  export default {
    components: {
      uniLoadMore,
    },
    data () {
      return {
        cateMaskState: 0, //分类面板展开状态
        headerPosition: 'fixed',
        headerTop: '0px',
        loadingType: 'more', //加载更多状态
        filterIndex: 0,
        cateId: 0, //已选三级分类id
        action: 'catagory',
        priceOrder: 0, //1 价格从低到高 2价格从高到低
        cateList: [],
        goodsList: [],
        page: 1,
      }
    },
    onShareAppMessage(res) {
      if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
      }
      return {
        title: '趣奇市场-商品库',
        content:'丰富的商品库',
        path: '/pages/product/all'
      }
    },
    onLoad (options) {
      // #ifdef H5
      this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px'
      // #endif
      console.log(options)
      this.page = 1
      this.cateId = options.params
      this.action = options.action
      this.loadCateList()
      this.loadData()
    },
    onPageScroll (e) {
      //兼容iOS端下拉时顶部漂移
      if (e.scrollTop >= 0) {
        this.headerPosition = 'fixed'
      } else {
        this.headerPosition = 'absolute'
      }
    },
    //下拉刷新
    onPullDownRefresh () {
      this.page = 1
      this.loadData('refresh')
    },
    //加载更多
    onReachBottom () {
      if (this.loadingType !== 'nomore') {
        this.page = this.page + 1
        this.loadData()
      }
    },
    methods: {
      //加载分类
      async loadCateList () {
        this.cateList = (await goodsCategoryList({parent_id: 0})).result
        if (!this.cateList instanceof Array) {
          this.cateList = []
        }
        if (!this.server._isEmpty(this.cateList) && this.cateList.length > 0) {
          this.cateList.forEach(item => {
            item.image = this.server.fixUrl(item.image)
          })
        }
      },
      //加载商品 ，带下拉刷新和上滑加载
      async loadData (type = 'add', loading) {
        uni.showLoading({
          title: '正在加载',
        })
        //没有更多直接返回
        if (type === 'add') {
          if (this.loadingType === 'nomore') {
            return
          }
          this.loadingType = 'loading'
        } else {
          this.loadingType = 'more'
        }
        if (type === 'refresh') {
          this.goodsList = []
        }
        console.log(this.action)
        let nomore = false
        let data={}
        switch (this.action) {
          case 'new':
            this.goodsList = (await getGoodsListNew()).result
            nomore = true
            break
          case 'guess':
            this.goodsList = (await getGoodsListRecommand()).result
            nomore = true
            break
          case 'search':
            data = (await searchGoods({q: this.cateId, p: this.page})).result
            if (this.page > 1) {
              if (!server._isEmpty(data.goods_list) && data.goods_list instanceof Array && data.goods_list.length > 0) {
                this.goodsList = this.goodsList.concat(data.goods_list)
                nomore = false
              } else {
                nomore = true
              }
            } else {
              this.goodsList = data.goods_list
            }
            break
          default:
            data = (await getGoodsList({p: this.page, id: this.cateId})).result
            if (this.page > 1) {
              if (!server._isEmpty(data.goods_list) && data.goods_list instanceof Array && data.goods_list.length > 0) {
                this.goodsList = this.goodsList.concat(data.goods_list)
                nomore = false
              } else {
                nomore = true
              }
            } else {
              this.goodsList = data.goods_list
            }
            break
        }
        if (!this.goodsList instanceof Array || this.server._isEmpty(this.goodsList)) {
          this.goodsList = []
        }
        if (!this.server._isEmpty(this.goodsList) && this.goodsList.length > 0) {
          this.goodsList.forEach(item => {
            item.original_img = this.server.fixUrl(item.original_img)
          })
        }
        //判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)

        this.loadingType = nomore ? 'nomore' : 'more'
        uni.hideLoading()
        uni.stopPullDownRefresh()
      },
      //筛选点击
      tabClick (index) {
        if (this.filterIndex === index && index !== 2) {
          return
        }
        this.filterIndex = index
        if (index === 2) {
          this.priceOrder = this.priceOrder === 1 ? 2 : 1
        } else {
          this.priceOrder = 0
        }
        uni.pageScrollTo({
          duration: 300,
          scrollTop: 0,
        })
        this.loadData('refresh', 1)
        uni.showLoading({
          title: '正在加载',
        })
      },
      //显示分类面板
      toggleCateMask (type) {
        let timer = type === 'show' ? 10 : 300
        let state = type === 'show' ? 1 : 0
        this.cateMaskState = 2
        setTimeout(() => {
          this.cateMaskState = state
        }, timer)
      },
      //分类点击
      changeCate (item) {
        this.cateId = item.id
        this.page = 1
        this.action = 'catagory'
        this.toggleCateMask()
        uni.pageScrollTo({
          duration: 300,
          scrollTop: 0,
        })
        this.loadData('refresh', 1)
        uni.showLoading({
          title: '正在加载',
        })
      },
      //详情
      navToDetailPage (item) {
        //测试数据没有写id，用title代替
        let id = item.goods_id
        uni.navigateTo({
          url: `/pages/product/product?id=${id}`,
        })
      },
      stopPrevent () {},
    },
  }
</script>

<style lang="scss">
    page, .content {
        background: $page-color-base;
    }

    .content {
        padding-top: 96upx;
    }

    .navbar {
        position: fixed;
        left: 0;
        top: var(--window-top);
        display: flex;
        width: 100%;
        height: 80upx;
        background: #fff;
        box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
        z-index: 10;
        .nav-item {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            font-size: 30upx;
            color: $font-color-dark;
            position: relative;
            &.current {
                color: $base-color;
                &:after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translateX(-50%);
                    width: 120upx;
                    height: 0;
                    border-bottom: 4upx solid $base-color;
                }
            }
        }
        .p-box {
            display: flex;
            flex-direction: column;
            .yticon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 30upx;
                height: 14upx;
                line-height: 1;
                margin-left: 4upx;
                font-size: 26upx;
                color: #888;
                &.active {
                    color: $base-color;
                }
            }
            .xia {
                transform: scaleY(-1);
            }
        }
        .cate-item {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 80upx;
            position: relative;
            font-size: 44upx;
            &:after {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                border-left: 1px solid #ddd;
                width: 0;
                height: 36upx;
            }
        }
    }

    /* 分类 */
    .cate-mask {
        position: fixed;
        left: 0;
        top: var(--window-top);
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0);
        z-index: 95;
        transition: .3s;

        .cate-content {
            width: 630upx;
            height: 100%;
            background: #fff;
            float: right;
            transform: translateX(100%);
            transition: .3s;
        }
        &.none {
            display: none;
        }
        &.show {
            background: rgba(0, 0, 0, .4);

            .cate-content {
                transform: translateX(0);
            }
        }
    }

    .cate-list {
        display: flex;
        flex-direction: column;
        height: 100%;
        .cate-item {
            display: flex;
            align-items: center;
            height: 90upx;
            padding-left: 30upx;
            font-size: 28upx;
            color: #555;
            position: relative;
        }
        .two {
            height: 64upx;
            color: #303133;
            font-size: 30upx;
            background: #f8f8f8;
        }
        .active {
            color: $base-color;
        }
    }

    /* 商品列表 */
    .goods-list {
        display: flex;
        flex-wrap: wrap;
        padding: 0 30upx;
        background: #fff;
        .goods-item {
            display: flex;
            flex-direction: column;
            width: 48%;
            padding-bottom: 40upx;
            &:nth-child(2n+1) {
                margin-right: 4%;
            }
        }
        .image-wrapper {
            width: 100%;
            height: 330upx;
            border-radius: 3px;
            overflow: hidden;
            image {
                width: 100%;
                height: 100%;
                opacity: 1;
            }
        }
        .title {
            font-size: $font-lg;
            color: $font-color-dark;
            line-height: 80upx;
        }
        .price-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 10upx;
            font-size: 24upx;
            color: $font-color-light;
        }
        .price {
            font-size: $font-lg;
            color: $uni-color-primary;
            line-height: 1;
            &:before {
                font-size: 26upx;
            }
        }
    }


</style>
